import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

V tomto príklade:

• React.lazy sa používa na lenivé načítanie MyComponent.
• Suspense obaľuje LazyComponent.
• Vlastnosť fallback poskytuje náhradné používateľské rozhranie (indikátor načítavania), ktoré sa zobrazí počas načítavania MyComponent.

Implementing Error Boundaries

Zatiaľ čo Suspense spracováva stavy načítavania, Error Boundaries sú komponenty React, ktoré zachytávajú chyby JavaScriptu kdekoľvek v strome podradených komponentov, zaznamenávajú tieto chyby a zobrazujú náhradné používateľské rozhranie namiesto zrútenia celého stromu komponentov.

How Error Boundaries Work

Error Boundaries sú triedne komponenty, ktoré definujú nasledujúce metódy životného cyklu:

• static getDerivedStateFromError(error): Táto metóda sa vyvolá po tom, čo podradený komponent vyvolal chybu. Prijíma chybu, ktorá bola vyvolaná ako argument a mala by vrátiť hodnotu na aktualizáciu stavu.
• componentDidCatch(error, info): Táto metóda sa vyvolá po tom, čo podradený komponent vyvolal chybu. Prijíma chybu a informačný objekt obsahujúci informácie o tom, ktorý komponent chybu vyvolal. Toto je ideálne miesto na zaznamenanie chyby do služby, ako je Sentry alebo Bugsnag.

Important: Error Boundaries zachytávajú chyby iba v komponentoch pod nimi v strome. Error Boundary nemôže zachytiť chybu v sebe samom.

Example: Basic Error Boundary Implementation

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = {
 hasError: false
 };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return {
 hasError: true
 };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

Ak chcete použiť Error Boundary, obaľte akýkoľvek komponent, ktorý môže vyvolať chybu:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

Integrating Suspense and Error Boundaries

Skutočná sila pochádza z kombinovania Suspense a Error Boundaries. To vám umožní elegantne spracovať stavy načítavania aj chyby vo vašej aplikácii. Odporúčaný postup je obaliť Suspense pomocou Error Boundary. Týmto spôsobom, ak sa komponent, ktorý sa má lenivo načítať, nepodarí načítať (napr. chyba siete), Error Boundary môže zachytiť chybu a zobraziť používateľovi užitočnú správu.

Example: Combining Suspense and Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...